<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--[if lte IE 9 ]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-store,must-revalidate">
<meta http-equiv="expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>总览</title>
<link rel="stylesheet" href="../../css/bootstrap.min.css" />
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<!--[if IE 7]><link rel="stylesheet" href="../../css/font-awesome-ie7.min.css"><![endif]-->
<link rel="stylesheet" href="../../css/manage.css" />
<style>
.status-ul {
	font-size: 16px;
	line-height: 60px;
	list-style-type: none;
	padding-bottom: 30px;
	padding-left: 0;
}
.status-ul li {
	border-bottom: 1px solid #ccc;
}
.status-ul li i {
	padding-right: 10px;
	color: #017294;
}
.radial {
	margin-bottom: 30px;
	position: relative;
}
.cpu-mark .mark-a {
	position: absolute;
	z-index: 100;
	width: 74px;
	height: 74px;
	top: 0;
	left: 0;
	filter: alpha(opacity=50);
	opacity: 0.50;
	background:#000
}
.cpu-mark .mark-b {
	position: absolute;
	z-index: 101;
	width: 74px;
	height: 74px;
	top: 0;
	left: 0;
	font-weight: bold;
	color: #fff;
	line-height: 74px;
	text-align: center;
}
.radial-left {
	padding: 10px;
	width: 74px;
	height: 74px;

	border: 1px solid #e6e6e6;
	border-right: none;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.radial-right {
	font-size: 15px;
	width: 100%;
	height: 74px;
	padding-left: 74px;
	border: 1px solid #e6e6e6;
	border-left: none;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;

}
.radial-right span {
	display: inline-block;
	padding-top: 15px;
	padding-left: 15px;
	line-height: 16px;
}
.radial-right p {
	font-weight: bold;
	padding-left: 15px;
	line-height: 32px;
}
.network {
	list-style-type: none;
	padding: 0;
}
.network li.item {
	border: 1px solid #ccc;
	min-height: 260px;
	margin-bottom: 10px;
	margin-left: -1px;
}
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
	position: relative;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
}
@media (min-width:768px) {
	.col-sm-5ths {
		width: 20%;
		float: left;
	}
}
@media (min-width:992px) {
	.col-md-5ths {
		width: 20%;
		float: left;
	}
	.network {
		margin-left: 2px;
	}
}
@media (min-width:1200px) {
	.col-lg-5ths {
		width: 20%;
		float: left;
	}
}
.zone-big {
	display: block;
	height: 39px;
	margin: 39px 0 20px 20px;
	background: url(../../images/ethernet.png) no-repeat 0 -240px;
	padding-left: 50px;
}
.zone {
	font-weight: bold;
	font-size: 14px;
}
.speed-duplex {
	font-size: 12px;
}
.net-eth {
	list-style-type: none;
	padding-left: 20px;
}
.net-eth li {
	font-weight: bold;
}
.net-eth li span {
	font-weight: normal;
}
.spin-load {
	margin-left: 20px;
	font-size: 19px;
	display: none;
}
</style>
<script src="../../js/lib/jquery-1.11.3.min.js"></script>
<script src="../../js/lib/jquery.cookie.js"></script>
<script src="../../js/lib/json2.js"></script>
<script src="../../js/lib/bootstrap.min.js"></script>
<script src="../../js/lib/highcharts.js"></script>
<script src="../../js/lib/radialIndicator.min.js"></script>
<script src="../../js/common/jquery.ext.verify.js"></script>
<script src="../../js/common/common.js"></script>
<script src="../../js/admin_status/index.js"></script>
</head>
<body>
<!-- header -->
<div id="header_ajax"></div>
<script src="../../js/common/header.ajax.js"></script>

<!-- main Start -->
<div id="main" class="main">
	<div class="container-fluid">
		<div class="main-wrapper clearfix">
			<div class="main-top">
				<span class="title"><i class="icon-align-justify"></i> 系统状态<i class="spin-load spin-load1 icon-spin icon-spinner"></i></span>
			</div>
			<div class="col-md-7" style="padding:0 40px;">
				<ul class="status-ul">
					<li class="clearfix">
						<span class=""><i class="icon-info-sign"></i>型号</span>
						<span class="pull-right" id="distribution">--</span>
					</li>
					<li class="clearfix">
						<span class=""><i class="icon-tags"></i>版本</span>
						<span class="pull-right" id="version">--</span>
					</li>
					<li class="clearfix">
						<span><i class="icon-time"></i>系统时间</span>
						<span class="pull-right" id="times">--</span>
					</li>
					<li class="clearfix">
						<span><i class="icon-time"></i>运行时间</span>
						<span class="pull-right" id="uptime">--</span>
					</li>
					<li class="clearfix">
						<span><i class="icon-user"></i>在线用户数</span>
						<span class="pull-right" id="usercount">--</span>
					</li>
				</ul>
			</div>
			<div class="col-md-5" style="padding:23px 40px; 0">
				<div class="radial" style="position: relative;">
					<div class="cpu-mark">
						<div class="mark-a"></div>
						<div class="mark-b">采集中...</div>
					</div>
					<div class="radial-left pull-left" style="background: #4fc4ea;">
						<div id="cpuidle"></div>
					</div>
					<div class="radial-right">
						<span class="cpuidle">-- / --</span>
						<p style="color:#00c2ff;">CPU</p>
					</div>
				</div>

				<div class="radial">
					<div class="radial-left pull-left" style="background: #facd49;">
						<div id="memory"></div>
					</div>
					<div class="radial-right">
						<span class="memory">-- / --</span>
						<p style="color:#ffbc00">内存</p>
					</div>
				</div>

				<div class="radial">
					<div class="radial-left pull-left" style="background: #f16c4c;">
						<div id="conncount"></div>
					</div>
					<div class="radial-right">
						<span class="conncount">-- / --</span>
						<p style="color:#ff2f00">活动连接</p>
					</div>
				</div>
			</div>
		</div>

		<div class="main-wrapper clearfix">
			<div class="main-top">
				<span class="title"><i class="icon-align-justify"></i> 实时流量<i class="spin-load spin-load2 icon-spin icon-spinner"></i></span>
			</div>
			<div class="col-md-12">
				<div id="container_eth"></div>
			</div>
			<div class="col-md-12">
				<div id="container_user"></div>
			</div>
		</div>

		<div class="main-wrapper clearfix">
			<div class="main-top">
				<span class="title"><i class="icon-align-justify"></i> 接口状态<i class="spin-load spin-load2 icon-spin icon-spinner"></i></span>
			</div>
			<ul class="network clearfix">
				<li class="item col-md-5ths port0">
					<div class="zone-big">
						<div class="zone">
							<span>--</span>
						</div>
						<div class="speed-duplex">
							<span class="speed">-</span>
							<span class="duplex">-</span>
						</div>
					</div>

					<ul class="net-eth">
						<li class="proto">类型: <span>--</span></li>
						<li class="ipaddr">地址: <span>--</span></li>
						<li class="netmask">子网掩码: <span>--</span></li>
						<li class="gwaddr">网关: <span>--</span></li>
						<li class="dns1">DNS 1: <span>--</span></li>
						<li class="dns2">DNS 2: <span>--</span></li>
						<li class="uptime">运行: <span>--</span></li>
					</ul>
				</li>
				<li class="item col-md-5ths port1">
					<div class="zone-big">
						<div class="zone">
							<span>--</span>
						</div>
						<div class="speed-duplex">
							<span class="speed">-</span>
							<span class="duplex">-</span>
						</div>
					</div>

					<ul class="net-eth">
						<li class="proto">类型: <span>--</span></li>
						<li class="ipaddr">地址: <span>--</span></li>
						<li class="netmask">子网掩码: <span>--</span></li>
						<li class="gwaddr">网关: <span>--</span></li>
						<li class="dns1">DNS 1: <span>--</span></li>
						<li class="dns2">DNS 2: <span>--</span></li>
						<li class="uptime">运行: <span>--</span></li>
					</ul>
				</li>
				<li class="item col-md-5ths port2">
					<div class="zone-big">
						<div class="zone">
							<span>--</span>
						</div>
						<div class="speed-duplex">
							<span class="speed">-</span>
							<span class="duplex">-</span>
						</div>
					</div>

					<ul class="net-eth">
						<li class="proto">类型: <span>--</span></li>
						<li class="ipaddr">地址: <span>--</span></li>
						<li class="netmask">子网掩码: <span>--</span></li>
						<li class="gwaddr">网关: <span>--</span></li>
						<li class="dns1">DNS 1: <span>--</span></li>
						<li class="dns2">DNS 2: <span>--</span></li>
						<li class="uptime">运行: <span>--</span></li>
					</ul>
				</li>
				<li class="item col-md-5ths port3">
					<div class="zone-big">
						<div class="zone">
							<span>--</span>
						</div>
						<div class="speed-duplex">
							<span class="speed">-</span>
							<span class="duplex">-</span>
						</div>
					</div>

					<ul class="net-eth">
						<li class="proto">类型: <span>--</span></li>
						<li class="ipaddr">地址: <span>--</span></li>
						<li class="netmask">子网掩码: <span>--</span></li>
						<li class="gwaddr">网关: <span>--</span></li>
						<li class="dns1">DNS 1: <span>--</span></li>
						<li class="dns2">DNS 2: <span>--</span></li>
						<li class="uptime">运行: <span>--</span></li>
					</ul>
				</li>
				<li class="item col-md-5ths port4">
					<div class="zone-big">
						<div class="zone">
							<span>--</span>
						</div>
						<div class="speed-duplex">
							<span class="speed">-</span>
							<span class="duplex">-</span>
						</div>
					</div>

					<ul class="net-eth">
						<li class="proto">类型: <span>--</span></li>
						<li class="ipaddr">地址: <span>--</span></li>
						<li class="netmask">子网掩码: <span>--</span></li>
						<li class="gwaddr">网关: <span>--</span></li>
						<li class="dns1">DNS 1: <span>--</span></li>
						<li class="dns2">DNS 2: <span>--</span></li>
						<li class="uptime">运行: <span>--</span></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

</body>
</html>